<template>
  <view class="list-wrapper">
    <view class="list-wrapper-inner">
      <view class="add-wrapper" @click="handleAdd">
        <image class="add-i" :src="baseImgUrl + 'add-item-register.png'"></image>
        <view class="add-text">
          添加备案
        </view>
      </view>
      <view class="list-container-wrapper">
        <yy-scroll-view ref="scrllViewRef1" :static-params="staticParams1" request-url="/dsSyAerocraft/aerocraftList"
          :auto-request="false">
          <template slot-scope="{list}">
            <template v-for="(item, index) in list">
              <view class="v-item item-phone" @click="handleItemClick(item)">
                <image class="v-icon" :src="imgPrefix + item.imageListUrl[0]"
                  v-if="item.imageListUrl && item.imageListUrl.length"></image>
                <image class="v-icon" v-else :src="baseImgUrl + 'empty-picture.png'"></image>
                <view class="right-item">
                  <view class="phone-name">
                    {{item.model}}
                  </view>
                  <view class="t-item item-center">
                    <view class="label-t">
                      所有类型:
                    </view>
                    <view class="value-t">
                      <text selectable>{{item.typeCode == 0 ? '个人所有' : '单位所有'}}</text>
                    </view>
                  </view>
                  <view class="t-item">
                    <view class="label-t">
                      报备时间:
                    </view>
                    <view class="value-t">
                      {{item.createTime}}
                    </view>
                  </view>
                  <image v-if="item.status === 1" class="i-flag" :src="baseImgUrl +'loss-icon.png'"></image>
                </view>
              </view>
            </template>

          </template>
        </yy-scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    navTo
  } from '@/utils/util'

  export default {
    data() {
      return {
        baseImgUrl: this.$baseImgUrl,
        imgPrefix: uni.getStorageSync("imgPrefix"),
        show: false,
        currentType: '',
        scrllViewRef1: null,
        staticParams1: {
          stype: '0'
        },
      }
    },
    onLoad(options) {
      this.options = options
      Object.assign(this.staticParams1, {
        companyMessageId: this.options.companyMessageId
      })
      this.$refs.scrllViewRef1.getList('init', this.staticParams1)
      uni.$on('register-load', () => {
        this.$refs.scrllViewRef1.getList('init', this.staticParams1)
      })
    },
    onUnload() {
      uni.$off('register-load')
    },
    methods: {
      close() {
        this.show = false
        this.currentType = ''
      },
      open() {},
      handleAdd() {
        this.show = true
        navTo({
          url: '/multipleRealInformation/aircraft/add'
        })
      },
      handleSelect(type) {
        this.currentType = type
      },
      handleItemClick(item) {
        navTo({
          url: '/multipleRealInformation/aircraft/detail',
          params: {
            ...item
          }
        })
      }
    }
  }
</script>

<style>
  page {
    background: #F9F9F9;
    height: 100%;
    padding: 10rpx 24rpx 24rpx 24rpx;
    width: 100%;
    box-sizing: border-box;
  }
</style>
<style scoped lang="scss">
  .list-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;

    .list-wrapper-inner {
      height: 100%;
      display: flex;
      flex-direction: column;
    }

    .add-wrapper {
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      border: 1rpx solid #EEEEEE;
      padding-top: 32rpx;
      padding-bottom: 38rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      flex-shrink: 0;
      margin-bottom: 10rpx;
      background: #FFFFFF;


      .add-i {
        width: 30rpx;
        height: 30rpx;
      }

      .add-text {
        font-weight: 500;
        font-size: 30rpx;
        color: #181818;
        margin-top: 6rpx;
        margin-bottom: 19rpx;
      }

      .add-desc {
        font-weight: 400;
        font-size: 24rpx;
        color: #999999;
      }
    }

    .list-container-wrapper {
      flex: 1;
      height: 0;
      overflow: auto;

      .v-item {
        display: flex;
        padding: 28rpx 29rpx;
        position: relative;
        margin-bottom: 10rpx;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        align-items: center;
        background: #FFFFFF;

        .v-icon {
          width: 148rpx;
          height: 148rpx;
          border-radius: 16rpx 16rpx 16rpx 16rpx;
          flex-shrink: 0;
          margin-right: 19rpx;
        }

        .right-item {
          .phone-name {
            font-weight: bold;
            font-size: 28rpx;
            color: #101010;
          }

          .t-item {
            display: flex;
            align-items: center;

            .label-t {
              font-weight: 500;
              font-size: 28rpx;
              color: #999999;
              flex-shrink: 0;
            }

            .value-t {
              word-break: break-all;
              font-weight: 500;
              font-size: 28rpx;
              color: #101010;
              margin-left: 11rpx;
            }
          }

          .item-center {
            margin: 16rpx 0;
          }
        }

        .i-flag {
          position: absolute;
          width: 140rpx;
          height: 122rpx;
          top: 41rpx;
          right: 27rpx;
        }
      }

      .item-car {
        background: linear-gradient(180deg, #FFC684 0%, #F88E31 100%);

        .right-item {
          .t-item {
            .label-t {
              color: #FBDDC2;
            }
          }
        }
      }

    }
  }

  .tenant-info-wrapper {
    display: flex;
    flex-direction: column;
    padding-top: 30rpx;

    .top-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 134rpx;
      padding: 0 18rpx;

      .p-title {
        font-weight: bold;
        font-size: 30rpx;
        color: #101010;
      }
    }

    .p-container {
      /deep/.u-radio-group--row {
        flex-direction: column;
      }

      .p-item {
        width: 100%;
        padding: 0 35rpx;
        display: flex;

        .p-item-wrapper {
          display: flex;
          width: 100%;
          justify-content: space-between;
          background: #F9FCFF;
          border-radius: 8rpx 8rpx 8rpx 8rpx;
          margin-bottom: 20rpx;
          padding: 30rpx 38rpx 27rpx 42rpx;

          .p-name {
            font-weight: bold;
            font-size: 36rpx;
            color: #333333;
            margin-bottom: 16rpx;
          }

          .p-text {
            font-weight: 400;
            font-size: 26rpx;
            color: #BBBBBB;
          }
        }

        .p-active {
          border: 1rpx solid #2488F5;
        }
      }

      .p-button {
        padding: 20rpx 28rpx 39rpx 28rpx;

        /deep/ .u-button__text {
          font-size: 36rpx !important;
        }
      }
    }
  }
</style>